<template>
 <div class="topbar">
    <div class="topbarwrap wrap">
        <div class="left">欢迎来到叩丁狼积分商城</div>
        <ul class="right">
            <li>
                <img :src="userInfo.headImg">
                用户名：{{userInfo.nickName}}
                </li>
            <li>我的积分：{{userInfo.coin}}</li>
            <li>获取积分</li>
            <li>叩丁狼官网</li>
            <li class="cart-btn" v-if="isLoginStatus">
                <img src="../assets/img/cart.png" alt="" />
                <span>购物车</span>
                <strong>{{ cartTotal }}</strong>
            </li>
            <li class="loginbtn" @click="changeIsShowLoginModel(true)" v-else>登录</li>
        </ul>
    </div>
 </div>
</template>

<script>
import { WeiXinLoginAPI } from '@/request/api';
import { mapActions,mapMutations,mapState } from 'vuex';


export default {
    data () {
        return {
        }
    },
    created() {

        // console.log("topbar---执行了created");
    this.$router.onReady(async () =>{
        let paramscode = this.$route.query.code;
        if (paramscode) {
            let res = await WeiXinLoginAPI({
                code: paramscode,
            });
            // console.log(res);
            // 接口结果有三种情况 0 400 407
            if(res.code==0){
                // 成功
                // 1.提示成功
                alert("登录成功");
                // 2.存储token
                localStorage.setItem("x-auth-token", res["x-auth-token"])
                // 3.更新登录状态
                this.changeIsLoginStatus(true);
                // 4.清除地址栏中code
                this.$router.push(this.$route.path);
                // 5。获取用户信息
                this.asyncchangeUserInfo()
            }else if(res.code==400){
                // 二维码失效
                alert("请重新扫码 ")
            }else if(res.code==407){
                //  第一次登录 (会有uuid)
                // 1.提示第一次登录
                this.asyncIsShowToast({
                    isshow:true,
                    msg:"请使用手机号再登陆一次",
                    type:"danger"
                })
                // 2.弹出登录框
                this.changeIsShowLoginModel(true)
                // 3.本地存储uuid
                localStorage.setItem("uuid", res.uuid);
                // 4.清除下地址栏中的code
                this.$router.push(this.$route.path);
            }
        }else {
            let token = localStorage.getItem("x-auth-token");
            this.changeIsLoginStatus(Boolean(token))
            if(token){
                this.asyncchangeUserInfo()
            }else{
                this.initUserInfo();
            }
            
            
        }
        
    })

  },
    computed: {
        ...mapState({
            isLoginStatus: (state) => state.loginStatus.isLoginStatus,
            userInfo: (state) => state.userInfo.userInfo,
            cartTotal: (state) => state.userInfo.cartTotal
        }),
    },
    methods:{
        
        ...mapMutations({
            changeIsShowLoginModel:"showModel/changeIsShowLoginModel",
            changeIsLoginStatus:"loginStatus/changeIsLoginStatus",
            initUserInfo:"userInfo/initUserInfo"
        }),
        ...mapActions({
            asyncIsShowToast:"showToast/asyncIsShowToast",
            asyncchangeUserInfo:"userInfo/asyncchangeUserInfo"
        }),
    },
    // watch:{
    //     // 方式一
    //     "$route.path":{
    //         handler(newval,oldval){
    //             console.log("地址改变了....");
    //             let token = localStorage.getItem("x-auth-token");
    //             this.changeIsLoginStatus(Boolean(token))
    //         }
    //     }
    // } 方式二在app.vue
};
</script>

<style lang="less" scoped> 
    .topbar{
        height: 40px;
        width: 100vw;
        line-height: 40px;
        background: linear-gradient(90deg, #F05F57, #360940 );
        font-family: SourceHanSansSC;
        font-size: 14px;
        font-weight: 300;
        color: #FFFEFE;
        .topbarwrap{
            display: flex;
            justify-content: space-between;
            .right{
                li{
                    float: left;
                    padding: 0 10px;
                    text-align: center;
                    cursor: pointer;
                    img {
                        width: 23px;
                        height: 22px;
                        border-radius: 13px;
                        vertical-align: middle;
                    }
                    &.loginbtn{
                        width: 124px;
                        height: 40px;
                        background: linear-gradient(90deg, #6FFF99, #1450CC );;
                    }

                }
                .cart-btn {
                    width: 124px;
                    height: 40px;
                    background: linear-gradient(90deg, #6FFF99, #1450CC );
                    text-align: center; 
                    img{
                    width: 20px;
                    height: 19px;
                    vertical-align: middle;
                    }
                    span{
                    margin: 0 8px;
                    }
                    strong{
                    width: 22px;
                    height: 22px;
                    line-height: 22px;
                    display: inline-block;
                    border-radius: 50%;
                    background-color: #fd604d;
                    }
                }
            }
        }
    }

</style>